<template>
  <div class="home">
    <!-- <van-nav-bar title="标题" left-arrow>
      <template #left>
        <van-icon name="guide-o" :size="20"/><p class="dingwei" @click="toDingWei">重庆</p>
      </template>
      <template #title>
        <van-search placeholder="请输入搜索关键词" left-icon="search" class="search"/>
      </template>
      <template #right>
        <van-icon name="chat-o" dot />
      </template>
    </van-nav-bar> -->
    <!-- <div class="ic">
      <div class="iic"  v-for="(item,index) in ic" :key="index">
        <van-icon class-prefix="iconfont" :name="item.i" :size="40"/>
        <span>{{item.k}}</span>
      </div>
    </div> -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"  :height="150">
      <van-swipe-item v-for="item in dataList" :key="item.id"><img class="simg" :src="item.imgUrl" /></van-swipe-item>
    </van-swipe> -->
    <van-tabs v-model:active="active">
      <van-tab title="动态">
        <div class="box">
          <div class="box-main" v-for="item in introduceList" :key="item">
            <div class="main-img">
              <!-- <img src="https://tr-osdcp.qunarzz.com/tr-osd-tr-manager/img/0399f31c2ec160f3a9b072b56f6c664c.jpg" alt=""> -->
              <img :src="item.introduce_url" alt="">
            </div>
            <div class="main-content">
              <div class="articular">
                {{item.introduce_content}}
                <!-- 千百年来，这座城市不知令多少文人墨客挥毫泼墨，也吸引了多少人为之神往陶醉。来桂林，这8大精华景点一定不能错过！ -->
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐">
        <div class="card"  @click="enterAbout">
          <div class="product-card" v-for="item in cardList" :key="item.id">
            <div class="card-img"><img :src="item.cover_url" alt=""></div>
            <div class="product-content">
                <a href="#">{{item.title}}</a>
                <div class="tag">{{item.tag==""?"无标签":item.tag}}</div>
                <div class="price">
                  <p>{{item.sale_count==""?"暂无销量":item.sale_count}}</p>
                  <span>￥{{item.price}}/人</span>
                </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="附近">
        <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in picList" :key="item.id">
            <img :src="item.pic" alt="">
          </van-swipe-item>
        </van-swipe> -->
        内容 3
      </van-tab>
      <van-tab title="更多">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import "../mock/index"
export default {
  name: 'HomeView',
  data () {
    return {
      dataList:[],
      // ic:[
      // {k:"地图",i:"tubiaozhizuomoban_ditu"},{k:"方向",i:"tubiaozhizuomoban_fangxiang"},{k:"飞机票",i:"tubiaozhizuomoban_feijipiao"},
      // {k:"风景",i:"tubiaozhizuomoban_fengjing"},{k:"火车",i:"tubiaozhizuomoban_huoche"}
      // ,{k:"飞机",i:"tubiaozhizuomoban_feiji"},{k:"酒店",i:"tubiaozhizuomoban_jiudian"},{k:"美食",i:"tubiaozhizuomoban_meishi"}
      // ],
      active:1,
      cardList:[],
      introduceList:[],
      picList:[
        {id:0,pic:"https://img.zcool.cn/community/01d75f5b35b3caa80121b994bdb848.jpg@1280w_1l_2o_100sh.jpg"}
      ]
     
    }
  },
  created () {
    this.$http("/api/swiper").then(res=>{
      this.dataList=res.data.swiperList
    })
    this.$http("/api/card").then(res=>{
      this.cardList=res.data.cardList
      console.log(this.cardList);
    })
    this.$http("/api/introduce").then(res=>{
      this.introduceList=res.data.introduceList
      console.log(this.introduceList);
    })
  },
  methods:{
    toDingWei(){
      this.$router.push("/city")
    },
    enterAbout(){
       this.$router.push("/about")
    }
  }
}
</script>

<style lang="scss" scoped>
  .simg{
    height: 100%;
    width: 100%;
  }
  .ic{
    box-shadow: 0px 0px 5px 0 rgb(204, 201, 201);
    border-radius: 8px;
    margin: 10px 10px;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background-color: white;
    flex-wrap: wrap;
    .iic{
      display: flex;
      width: 25%;
      justify-content: center;
      flex-direction: column;
      span{
        text-align: center;
      }
      i{
        text-align: center;
      }
    }
  }
  .box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .box-main{
      width: 93%;
      .main-img{
        height: 200px;
        margin-top: 5px;
        img{
          height: 100%;
          width: 100%;
          border-radius: 3%;
        }
      }
      .main-content{
        display: block;
        overflow: hidden;
        .articular{
          margin: 5px;
          font-size: 12px;
          color: gray;
          letter-spacing: 0.2rem;
        }
      }
    }
    
  }
  .card{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .product-card {
      width: 45%;
      margin: 5px 5px;
      border-radius: 10px;
      .card-img{
        img{
          border-radius: 8px;
          height: 100%;
          width: 100%;
        }
      }
      .product-content {
          width: 100%;
          padding: 10px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          a{
            color: black;
            font-size: 14px;
          }
          .tag{
            font-size: 14px;
            padding: 5px 0;
            color: gray;
          }
          .price{
            display: flex;
            justify-content: space-between;
            span{
              color: red;
            }
            p{
              margin: 0;
              
              font-size: 14px;
            }
          }
      }
    }
  }
  .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
      img{
        width: 100%;
        height: 100%;
      }
  }
</style>